<script setup lang="ts">
import { reactive, ref,onMounted,onUnmounted } from 'vue'
import baseCard from '@/components/base-card/index.vue'
// import { NButtonGroup, NButton, NBreadcrumb, NBreadcrumbItem, NGrid, NGridItem, NSpace, NAvatar, type DrawerPlacement, NDrawer, NDrawerContent, NBadge } from 'naive-ui'
import { type DrawerPlacement, } from 'naive-ui'
import wordpng from "../../assets/image/office/word.png"
import excelpng from '../../assets/image/office/excel.png'
import txtpng from '../../assets/image/office/txt.png'
import pdfpng from '../../assets/image/office/PDF.png'
import plcpng from '../../assets/image/office/plc.png'
import svgIcon from '../../components/base-svgIcon/index.vue';
import { sseService } from "@/assets/utils/sse";
import type { SSEChatParams } from "@/assets/utils/sse";
import { setUrl } from "@/service/sseUrl";
import Papa from "papaparse";


const breadcrumbItem = ref([
    { id: '00', "文件夹名称": '我的数据包' }
])

const data = reactive([
    {
        "文件名称": "work文件",
        "类型": "word",
        "日期": "2024-09-12 09:09:20",
        "状态": "锁定"
    },
    {
        "文件名称": "新入职人员档案",
        "类型": "pdf",
        "日期": "2024-09-12 09:09:20",
        "状态": "锁定"
    },
    {
        "文件名称": "工作日志",
        "类型": "txt",
        "日期": "2024-09-12 09:09:20",
        "状态": "锁定"
    },
    {
        "文件名称": "8月份人力成本核算数据报表",
        "类型": "excel",
        "日期": "2024-09-12 09:09:20",
        "状态": "新创建"
    },
    {
        "文件名称": "关于采购制的规定计划事项说明",
        "类型": "plc",
        "日期": "2024-09-12 09:09:20",
        "状态": "错误"
    }
])
const directory0 = ref([
    {
        "文件夹名称": "我的文件",
        "类型": "1",
        "类型1": " ",
        "标记": 1,
        id: '1',
        ch: true,
        "级别": "一级"
    },
    {
        "文件夹名称": "签收文件",
        "类型": "1",
        "类型1": " ",
        "标记": 5,
        id: '2',
        ch: false,
        "级别": "一级"
    },

])
const directory = ref<any>([
    {
        "文件夹名称": "我的文件",
        "类型": "1",
        "类型1": " ",
        "标记": 1,
        id: '1',
        // pid: 0,
        ch: true,
        "级别": "一级"
    },
    {
        "文件夹名称": "签收文件",
        "类型": "1",
        "类型1": " ",
        "标记": 5,
        id: '2',
        // pid: 0,
        ch: false,
        "级别": "一级"
    }

])
const d1 = ref([
    {
        "文件夹名称": "1我的文件",
        "类型": "1",
        "类型1": " ",
        "标记": 12,
        id: '2.d11',
        // pid: 1,
        ch: true,
        "级别": "二级"
    },
    {
        "文件夹名称": "1待签批文件",
        "类型": "2",

        "类型1": "word",
        "标记": 2,
        id: '2.d12',
        // pid: 2,
        ch: false,
        "级别": "二级"
    },
    {
        "文件夹名称": "1我的文件柜",
        "类型": "2",
        "类型1": "txt",
        "标记": 20,
        id: '2.d13',
        // pid: 1,
        ch: false,
        "级别": "二级"
    }
])

const d2 = ref([
    {
        "文件夹名称": "我的文件",
        "类型": "1",
        "标记": 12,
        id: '3.d21',
        ch: false,
        "级别": "三级"
    },
    {
        "文件夹名称": "签收文件",
        "类型": "1",
        "标记": 5,
        id: '3.d22',
        ch: false,
        "级别": "三级"
    },
    {
        "文件夹名称": "待签批文件",
        "类型": "1",
        "标记": 2,
        id: '3.d23',
        ch: false,
        "级别": "三级"
    },
    {
        "文件夹名称": "我的文件柜",
        "类型": "1",
        "标记": 20,
        id: '3.d24',
        ch: false,
        "级别": "三级"
    },

])

const qd1 = ref([
    {
        "文件夹名称": "我的文件",
        "类型": "1",
        "标记": 12,
        id: '3.qd11',
        ch: false,
        "级别": "二级"
    },
    {
        "文件夹名称": "我的文件柜",
        "类型": "1",
        "标记": 20,
        id: '3.qd14',
        ch: false,
        "级别": "二级"
    },

])

const qd2 = ref([
    {
        "文件夹名称": "我的文件",
        "类型": "2",
        "类型1": "word",
        "标记": 12,
        id: '3.qd211',
        ch: false,
        "级别": "三级"
    },
    {
        "文件夹名称": "我的文件柜",
        "类型": "2",
        "类型1": "pdf",
        "标记": 20,
        id: '3.qd244',
        ch: false,
        "级别": "三级"
    },

])



const active = ref(false)
const placement = ref<DrawerPlacement>('right')
const activate = (place: DrawerPlacement) => {
    active.value = true
    placement.value = place
}





function itemclick(val: any) {
    console.log(val);
    if (val['类型'] == '1') {
        breadcrumbItem.value.push(val)
        directory.value = []
        if (val.id == 1) {
            if (val['级别'] == '一级') {
                setTimeout(() => {
                    directory.value = d1.value
                }, 1000)
            }
            if (val['级别'] == '二级') {
                setTimeout(() => {
                    directory.value = d2.value
                }, 1000)
            }
        } else {
            if (val['级别'] == '一级') {
                setTimeout(() => {
                    directory.value = qd1.value
                }, 1000)
            }
            if (val['级别'] == '二级') {
                setTimeout(() => {
                    directory.value = qd2.value
                }, 1000)
            }
        }
    }
    console.log('ffff', breadcrumbItem.value);
}
function breadItem(val: any) {
    console.log(val);
    console.log('ffff', breadcrumbItem.value);
    // breadcrumbItem.value.splice(val,1)
    if (val.id == '00') {
        breadcrumbItem.value = [{ id: '00', "文件夹名称": '我的数据包' }]
        directory.value =  directory0.value
    }


    for (let index = 0; index <  breadcrumbItem.value.length; index++) {
        // console.log(breadcrumbItem.value[index]);
        // console.log(breadcrumbItem.value[index].id);
        // console.log(val.id == breadcrumbItem.value[index].id);
        
        if (val.id == breadcrumbItem.value[index].id) {
            breadcrumbItem.value.splice(index+1,breadcrumbItem.value.length-1)
            if (val.id == 1) {
                if (val['级别'] == '一级') {
                    setTimeout(() => {
                        directory.value = d1.value
                    }, 1000)
                }
                if (val['级别'] == '二级') {
                    setTimeout(() => {
                        directory.value = d2.value
                    }, 1000)
                }
            } else {
                if (val['级别'] == '一级') {
                    setTimeout(() => {
                        directory.value = qd1.value
                    }, 1000)
                }
                if (val['级别'] == '二级') {
                    setTimeout(() => {
                        directory.value = qd2.value
                    }, 1000)
                }
            }
        }

    }


}




onMounted(() => {
    sseServiceOpen()    
})
onUnmounted(() => {
    sseService.disconnect()
})





//see 链接
function sseServiceOpen() {
    console.log(sseService);

    const onopen = () => {
        console.log("建立无敌 sse 连接成功")
    }
    // 建立连接
    let sseChatParams: SSEChatParams = {
        onopen,
        url: setUrl('dataSet'),
        onmessage: (event: MessageEvent) => {
            // 收到消息
            console.log('收到消息菜单：', event.data);
            let fst = event.data.replace(/\\n/g, "\n")
            const pap = Papa.parse(fst, { header: true, delimiter: ";", newline: "\n" })
            console.log('解析解析', pap);

            // console.log(hotTableRef.value);setColHeaders
            // settings.value.colHeaders = pap.meta.fields
            // hotTableRef.value.hotInstance.loadData(pap.data)

      


           

        },
        finallyHandler: () => {
            console.log("finallyHandler操作")
        }
    };
    sseService.connect(sseChatParams)


}
</script>
<template>
    <baseCard>
        <n-breadcrumb>
            <n-breadcrumb-item v-for="(i, k) in breadcrumbItem" :key="k" clickable @click="breadItem(i)">
                <n-icon /> {{ i['文件夹名称'] }}
            </n-breadcrumb-item>
        </n-breadcrumb>
        <div id="drawer-target" style="position: relative; display: flex; justify-content: center;">
            <NGrid :x-gap="10" :y-gap="10" :cols="8">
                <NGridItem v-for=" item in directory" style="text-align: center; padding: 10px"
                    @dblclick="itemclick(item)">
                    <div v-if="item['类型'] == '1'">
                        <n-badge :value="Number(item.标记)" :max="20" :type="Number(item.标记) > 5 ? 'success' : 'info'"
                            :dot="Number(item.标记) === 1 ? true : false">
                            <svgIcon icon-name="#icon-wenjianjia3"></svgIcon>
                        </n-badge>
                        <div> {{ item.文件夹名称 }}</div>
                    </div>
                    <div v-else>
                        <svgIcon v-if="item['类型1'] === 'word'" icon-name="#icon-WORD"></svgIcon>
                        <svgIcon v-if="item['类型1'] === 'excel'" icon-name="#icon-PC-Excel"></svgIcon>
                        <svgIcon v-if="item['类型1'] === 'txt'" icon-name="#icon-txtwenjian"></svgIcon>
                        <!-- <svgIcon v-if="item['类型1'] === 'plc'" icon-name="#icon-wenjianjia3"></svgIcon> -->
                        <svgIcon v-if="item['类型1'] === 'pdf'" icon-name="#icon-PDF"></svgIcon>
                        <div> {{ item.文件夹名称 }}</div>
                    </div>
                </NGridItem>
            </NGrid>
        </div>
        <n-drawer v-model:show="active" :width="200" :height="100" :placement="placement" :trap-focus="false"
            :block-scroll="false" to="#drawer-target">
            <n-drawer-content title="辅助功能">
                辅助操作面板
            </n-drawer-content>
        </n-drawer>
        <!-- </div> -->
    </baseCard>
</template>